<template>
  <div class="">
    <div v-for="item in formatComponentsList" :key="item.key">
      <a-divider>{{ item.description }}</a-divider>
      <component :is="item.component"></component>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, defineAsyncComponent } from 'vue';

const componentsList = ref([
  {
    description: '常用表单类型',
    key:'EgSeven'
  },
  {
    description: '基本用法',
    key:'EgOne'
  },
  {
    description: '自定义切换按钮',
    key:'EgTwo'
  },
  {
    description: '展示详情，且切换表单数据回显',
    key:'EgThree'
  },
  {
    description: '详情与表单数据同时展示',
    key:'EgFour'
  },
  {
    description: '表单校验功能',
    key:'EgFive'
  },
  {
    description: '监听表单变化',
    key:'EgSix'
  },
])
const formatComponentsList = computed(()=> {
  return componentsList.value.map(item =>  ({
    ...item,
    component: defineAsyncComponent(() => import(`./components/${item.key}`))
  }))
})
</script>

<style lang="less" scoped>

</style>
